<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>正在疯抢</title>
<!-- 
，可以让网页的宽度自动适应手机屏幕的宽度。 其中： 
  width=device-width ：表示宽度是设备屏幕的宽度
  initial-scale=1.0：表示初始的缩放比例
  minimum-scale=0.5：表示最小的缩放比例 
  maximum-scale=2.0：表示最大的缩放比例
  user-scalable=yes：表示用户是否可以调整缩放比例
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1.0">
<!-- 控制删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 控制手机状态栏显示样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 数字是否转为拨号连接 -->
<meta name="format-detection" content="telephone=no">
<!-- 通常下面三句话一起来用，该网页不缓存 -->
<meta http-equiv="Expires" CONTENT="-1">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<link rel="stylesheet" href="dinner_list.css">
</head>
<script>
function calculagraph(obj,time) {
	 obj=document.getElementById("ticketDetails_"+obj);
	 date=parseInt(time,10);
	 var clearTime=null;
	 var init=function(obj,date){
		if(clearTime){clearTimeout(clearTime);clearTime=null;}
		var day=Math.floor(date/24/60/60);
		var  hours=Math.floor(date/60/60)-day*24;
		var  minutes=Math.floor(date/60)-day*24*60-hours*60;
		var seconds=date-minutes*60-day*24*60*60-hours*60*60;
		date--;
		obj.innerHTML='<i>'+day+'</i>天<i>'+hours+'</i>小时<i>'+minutes+'</i>分<i>'+seconds+'</i>秒';
		if(date===-1){
			var _obj=obj.parentNode.parentNode.parentNode.parentNode;
			
		   if(_obj.parentNode.className=="end"){
			  
		   }else if(_obj.parentNode.className=="unstart"){
			    _obj.parentNode.className="";
		   }else{
			   _obj.parentNode.className="end";
			 _obj.setAttribute("href","javascript:;");
		   }
		   
		}else{
			
			clearTime=setTimeout(function(){init(obj,date);},1E3);
		}
		
	}
	init(obj,date)
}
</script>
<body>
	<!--html start-->
	<div class="page">
	<div class="seckill-list">
			<nav>
				<a href="#" class="on" onclick ="changePage(this,'ing')">进行中<span></span></a> 
				<a href="#" onclick ="changePage(this,'unstart')">未开始<span></span></a>
				<a href="#" onclick ="changePage(this,'end')">已结束<span></span></a>
				<a href="#" onclick ="changePage(this,'all')">所有<span></span></a>
			</nav>
		<ul id="ing">
		<li>
					<a href="#">
						<div class="banner-img">
							<span class="end"></span>
							<img src="http://1.dms2015.sinaapp.com/dms_front/WebContent/static/dms/coupons/img/default.jpg">
							<i class="icon"></i>
						</div>
						<div class="cont clearfix">
							<div class="cont-r t_c">
								<div class="price">
									<p class="f_14">1000</p>
									<p>积分</p>
								</div>
								<em>我要抢<i class="icon"></i></em>
							</div>
							<div class="cont-l">
								<p>Nike下机新款100元优惠券限时抢购</p>
								<p>离结束：<span id="ticketDetails_1"><i>1</i>天<i>2</i>小时<i>4</i>分<i>56</i>秒</span><span class="pdl5">剩余：2000</span></p>
								<script type="text/javascript">
									calculagraph(1, "20000");
								</script>
							</div>
						</div>
					</a>
				</li>
		</ul>
		<ul id='end' style='display:none'>
		<li class="end">
					<a href="#">
						<div class="banner-img">
							<span class="starting"></span>
							<img src="http://1.dms2015.sinaapp.com/dms_front/WebContent/static/dms/coupons/img/default.jpg">
							<i class="icon"></i>
						</div>
						<div class="cont clearfix">
							<div class="cont-r t_c">
								<div class="price">
									<p class="f_14">100</p>
									<p>积分</p>
								</div>
								<em>我要抢<i class="icon"></i></em>
							</div>
							<div class="cont-l">
								<p>Nike下机新款100元优惠券限时抢购</p>
								<p>离结束：<span id="ticketDetails_2"><i>1</i>天<i>2</i>小时<i>4</i>分<i>56</i>秒</span><i class="icon"></i><span class="pdl5">剩余：2000</span></p>
								<script type="text/javascript">
									calculagraph(2, "5000");
								</script>
							</div>
						</div>
					</a>
				</li>
		</ul>
		<ul id='unstart' style="display:none;">
		<li class="unstart">
					<a href="#">
						<div class="banner-img">
							<span class="unstart"></span>
							<img src="http://1.dms2015.sinaapp.com/dms_front/WebContent/static/dms/coupons/img/default.jpg">
							<i class="icon"></i>
						</div>
						<div class="cont clearfix ">
							<div class="cont-r t_c">
								<div class="price">
									<p class="f_14">0000</p>
									<p>积分</p>
								</div>
								<em>我要抢<i class="icon"></i></em>
							</div>
							<div class="cont-l">
								<p>111</p>
								<p>离结束：<span id="ticketDetails_3"><i>1</i>天<i>2</i>小时<i>4</i>分<i>56</i>秒</span><span class="pdl5">剩余：2000</span></p>
								<script type="text/javascript">
									calculagraph(3, "12");
								</script>
							</div>
						</div>
					</a>
				</li>
		</ul>
	</div>
	
	</div>
	<!--html end-->
</body>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function changePage(a,state){
	var nav = a.parentNode;
	var parentDiv = nav.parentNode;
	$("ul",parentDiv).hide();
	$("#"+state).show();
	$(".on",nav).removeClass("on");
	$(a).addClass("on");
}
</script>
</html>